<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--

The `core-style` element helps manage styling inside other elements and can 
be used to make themes. The `core-style` element can be either a producer 
or consumer of styling. If it has its `id` property set, it's a producer. 
Elements that are producers should include css styling as their text content.
If a `core-style` has its `ref` property set, it's a consumer. A `core-style`
typically sets its `ref` property to the value of the `id` property of the
`core-style` it wants to use. This allows a single producer to be used in 
multiple places, for example, in many different elements.

It's common to place `core-style` producer elements inside HTMLImports.
Remote stylesheets should be included this way, the &#64;import css mechanism is
not currently supported.

Here's a basic example:

    <polymer-element name="x-test" noscript>
      <template>
        <core-style ref="x-test"></core-style>
        <content></content>
      </template>
    </polymer-element>

The `x-test` element above will be styled by any `core-style` elements that have
`id` set to `x-test`. These `core-style` producers are separate from the element
definition, allowing a user of the element to style it independent of the author's 
styling. For example:

    <core-style id="x-test">
      :host {
        backgound-color: steelblue;
      }
    </core-style>

The content of the `x-test` `core-style` producer gets included inside the
shadowRoot of the `x-test` element. If the content of the `x-test` producer
`core-style` changes, all consumers of it are automatically kept in sync. This
allows updating styling on the fly.

The `core-style` element also supports bindings and it is the producer 
`core-style` element is the model for its content. Here's an example:

    <core-style id="x-test">
      :host {
        background-color: {{myColor}};
      }
    </core-style>
    <script src="core-style.js"></script>

Finally, to facilitate sharing data between `core-style` elements, all
`core-style` elements have a `g` property which is set to the global 
`CoreStyle.g`. Here's an example:

    <core-style id="x-test">
      :host {
        background-color: {{g.myColor}};
      }
    </core-style>
    <script src="core-style-1.js"></script>

Finally, one `core-style` can be nested inside another. The `core-style`
element has a `list` property which is a map of all the `core-style` producers.
A `core-style` producer's content is available via its `cssText` property. 
Putting this together:

    <core-style id="common">
      :host {
        font-family: sans-serif;
      }
    </core-style>

    <core-style id="x-test">
      {{list.common.cssText}}

      :host {
        background-color: {{g.myColor}};
      }
    </core-style>


@group Polymer Core Elements
@element core-style
@homepage github.io
-->

<link rel="import" href="../polymer/polymer.html">

<polymer-element name="core-style" hidden>
<script src="core-style-2.js"></script>
</polymer-element>
